// 添加类型的 - 弹出层上的 表单标签
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

// 编辑弹窗的内容
let edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

//编辑按钮功能
$("tbody").on("click", ".edit", function () {
  const name = $(this).attr("data-name");
  const alias = $(this).attr("data-alias");
  const Id = $(this).attr("myid");
  let index = layer.open({
    type: 1,
    title: "编辑类别",
    area: ["500px", "300px"],
    content: edit_str,
    //弹窗成功后的回调
    success: function () {
      layui.form.val("edit", {
        name,
        alias,
        Id,
      });

      //给form表单注册事件

      $("#edit_form").on("submit", function (e) {
        e.preventDefault();
        axios({
          method: "POST",
          url: "http://api-breakingnews-web.itheima.net/my/article/updatecate",
          data: $("#edit_form").serialize(),
          headers: {
            //给后端转的自定义请求头
            Authorization: localStorage.getItem("token"),
          },
        }).then(({ data: res }) => {
          layer.msg(res.message);
          if (res.status === 0) {
            //关掉弹出层
            layer.close(index);
            // 重新渲染;
            render();
          }
        });
      });
    },
  });
});

//获取用户信息
function render() {
  $("tbody").empty();
  axios({
    method: "GET",
    url: "http://api-breakingnews-web.itheima.net/my/article/cates",
    headers: {
      //给后端转的自定义请求头
      Authorization: localStorage.getItem("token"),
    },
  }).then(({ data: res }) => {
    // console.log(res);
    //判断请求成功
    if (res.status === 0) {
      res.data.forEach((obj) => {
        const theTr = $(`<tr>
        <td>${obj.name}</td>
        <td>${obj.alias}</td>
        <td>
          <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
          <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
      </tr>`);
        $("tbody").append(theTr);
      });
    }
  });
}
render();

//添加功能
$(".add").on("click", function () {
  //定义一个表里index表示要关闭的弹出层
  let index = layer.open({
    type: 1,
    title: "添加类别",
    area: ["500px", "300px"],
    content: add_str,
    //弹窗成功后的回调
    success: function () {
      //注册表单的submit事件
      $(".add-form").on("submit", function (e) {
        e.preventDefault();
        axios({
          method: "POST",
          url: "http://api-breakingnews-web.itheima.net/my/article/addcates",
          data: $(".add-form").serialize(),
          headers: {
            //给后端转的自定义请求头
            Authorization: localStorage.getItem("token"),
          },
        }).then(({ data: res }) => {
          layer.msg(res.message);
          if (res.status === 0) {
            //关掉弹出层
            layer.close(index);
            // 重新渲染;
            render();
          }
        });
      });
    },
  });
});

//删除 利用事件委托
$("tbody").on("click", ".delete", function () {
  const Id = $(this).attr("myid");
  // console.log(Id);
  axios({
    method: "GET",
    url: `http://api-breakingnews-web.itheima.net/my/article/deletecate/${Id}`,
    headers: {
      //给后端转的自定义请求头
      Authorization: localStorage.getItem("token"),
    },
  }).then(({ data: res }) => {
    layer.msg(res.message);
    if (res.status === 0) {
      $(this).parents("tr").remove(); //自爆
    }
  });
});

layui.form.verify({
  ctname: [/^[\u4E00-\u9FA5]+$/, "分类名只能是中文"],
  aliname: [/^[a-z0-9]+$/, "小写英文和数字组成"],
});
